import React from 'react';
import ReactDom from 'react-dom';

import { Button, Input, Card, Swiper, Icon, Popover, Tag } from 'zent';

import './index.scss';

import { MLayout } from '@src/core';


import RoomCard from '@src/components/RoomCard';
import RoomCardGroup from '@src/components/RoomCardGroup';



const pages = [1, 2];

class OneView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible_type: false,
            visible_price: false,
            visible_sort: false,
            visible_more: false,


            banner_arr: [{
                img_url: 'http://www.besteasylearn.com:81/my_pic/banner_01.png',
                link_type: 1,
                link_to: 'http://m.ly.com'
            }, {
                img_url: 'http://www.besteasylearn.com:81/my_pic/banner_02.png',
                link_type: 1,
                link_to: 'http://m.baidu.com'
            }]
        };




    }





    render() {
        return (


            <MLayout>


                <div class="top-search">
                    <div className="left">
                        <Icon type="search" className="icon_search" />
                        <span>你想投资哪里?</span>
                    </div>
                    <div className="divider"></div>
                    <div className="right">
                        武汉
                        <Icon type="down" />
                    </div>
                </div>

                <div className="entry_container">
                    <div className="each">
                        <img src={require("../../imgs/00.jpg")} />
                        <div className="title">区域选房</div>
                    </div>
                    <div className="each">
                        <img src={require("../../imgs/00.jpg")} />
                        <div className="title">地图找房</div>
                    </div>
                    <div className="each">
                        <img src={require("../../imgs/00.jpg")} />
                        <div className="title">捡漏必看</div>
                    </div>
                    <div className="each">
                        <img src={require("../../imgs/00.jpg")} />
                        <div className="title">法拍百科</div>
                    </div>
                </div>




                <div className="day_show">
                    <div className="day_show_header">今日法拍卖行情</div>
                    <div className="divider"></div>
                    <div className="day_show_body">
                        <div className="day_show_each">
                            <div className="day_show_each_num">3</div>
                            <div className="day_show_each_title">今日成交</div>
                        </div>
                        <div className="divider"></div>
                        <div className="day_show_each">
                            <div className="day_show_each_num">3</div>
                            <div className="day_show_each_title">今日新增</div>
                        </div>
                        <div className="divider"></div>
                        <div className="day_show_each">
                            <div className="day_show_each_num">3</div>
                            <div className="day_show_each_title">无人报名</div>
                        </div>
                        <div className="divider"></div>
                        <div className="day_show_each">
                            <div className="day_show_each_num">3</div>
                            <div className="day_show_each_title">今日流拍</div>
                        </div>
                    </div>

                </div>


                <div className="banner-container">
                    <Swiper
                        dotsSize="small"
                        dotsColor="blue"
                        autoplay
                        arrows
                        arrowsType="light"
                        className="swiper-demo-simple"
                    >
                        {
                            this.state.banner_arr.map((item, index) => {
                                return <div className="swiper-demo-simple-h" key={index}>
                                    <img src={item.img_url} />
                                </div>;
                            })
                        }
                    </Swiper>

                </div>


                <div className="filter-container">

                    <Popover

                        visible={this.state.visible_type}
                        onVisibleChange={v => this.setState({ visible_type: v })}
                        className="filter-popover"
                        position={Popover.Position.AutoBottomCenter}
                        display="inline"
                        cushion={5}>
                        <Popover.Trigger.Click>
                            <div className="each_item">
                                类型
                                <Icon type="caret-down" />
                            </div>
                        </Popover.Trigger.Click>
                        <Popover.Content>
                            <div className="filter-panel">

                                <Button size="small" type="primary" onClick={() => this.setState({ visible_type: false })}>不限</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_type: false })}>住宅</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_type: false })}>商业</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_type: false })}>工业</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_type: false })}>其它</Button>

                            </div>

                        </Popover.Content>
                    </Popover>

                    <Popover
                        visible={this.state.visible_price}
                        onVisibleChange={v => this.setState({ visible_price: v })}
                        className="filter-popover"
                        position={Popover.Position.AutoBottomCenter}
                        display="inline"
                        cushion={5}>
                        <Popover.Trigger.Click>

                            <div className="each_item">
                                价格
                                <Icon type="caret-down" />
                            </div>
                        </Popover.Trigger.Click>
                        <Popover.Content>
                            <div className="filter-panel">

                                <Button size="small" type="primary" onClick={() => this.setState({ visible_price: false })}>200万以下</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_price: false })}>200-250万</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_price: false })}>500-1000万</Button>
                                <Button size="small" type="default" onClick={() => this.setState({ visible_price: false })}>1000万以上</Button>

                            </div>
                        </Popover.Content>
                    </Popover>

                    <Popover
                        visible={this.state.visible_sort}
                        onVisibleChange={v => this.setState({ visible_sort: v })}
                        className="zent-doc-popover"
                        position={Popover.Position.BottomLeft}
                        display="inline"
                        cushion={5}>
                        <Popover.Trigger.Click>

                            <div className="each_item">
                                排序
                                <Icon type="caret-down" />
                            </div>
                        </Popover.Trigger.Click>
                        <Popover.Content>
                            <Button onClick={() => this.setState({ visible_sort: false })}>关闭</Button>
                        </Popover.Content>
                    </Popover>

                    <div className="each_item">
                        类型
                                <Icon type="caret-down" />
                    </div>
                </div>


                <div className="RoomView">

                    <RoomCardGroup>
                        <RoomCard></RoomCard>
                        <RoomCard></RoomCard>
                        <RoomCard></RoomCard>
                        <div className="loadmore">
                            更多
                        </div>
                    </RoomCardGroup>



                </div>


            </MLayout>

        );
    }
}
export default OneView;